/* eslint-disable eqeqeq */
import { useHistory } from "react-router-dom";
import { commonUser, getInfo, upload } from "./API/LoginAPI";
import { Button, Form, ImageUploader, Input, Radio } from "antd-mobile";
import { useEffect, useState } from "react";
import { ImageUploadItem } from "antd-mobile/es/components/image-uploader";
import Header from "../Header";

export default function Alter() {
  let history = useHistory();

  const onFinish = async (values: any) => {
    let formData = new FormData();

    formData.append("file", avatar);

    let res = await upload(formData);

    let img = res.data.fileName;

    values.avatar = img;

    console.log(values);

    let res2 = await commonUser(values);
    console.log(res2);
    history.push("/mine/personal");
  };

  const [obj, setobj]: any = useState({});

  const [fileList, setFileList] = useState<ImageUploadItem[]>([]); //上传的图片的集合

  let [avatar, setAvatar] = useState<any>();

  const handleInfo = async () => {
    let res = await getInfo({});
    // console.log(res);
    if (res.data.code == 200) {
      setobj(res.data.user);
    }
  };

  useEffect(() => {
    handleInfo();
  }, []);

  let mockUpload = (file: File): any => {
    setAvatar(file);
    console.log(file);
    let res = {
      url: URL.createObjectURL(file),
    };
    console.log(res);
    return res;
  };

  // if (obj.nickName == null) {
  //   return <div></div>;
  // }
  return (
    <>
    <Header title="修改用户信息"></Header>
      <div className="boss xz-content">
        <Form
          layout="horizontal"
          onFinish={onFinish}
          initialValues={{
            ...obj,
          }}
          footer={
            <Button block type="submit" color="primary" size="large">
              提交
            </Button>
          }
        >
          <Form.Item name="avatar" label="头像">
            <ImageUploader
              value={fileList}
              onChange={setFileList}
              upload={mockUpload}
            />
          </Form.Item>
          <Form.Item
            name="nickName"
            label="昵称"
            rules={[{ required: true, message: "昵称不能为空" }]}
          >
            <Input placeholder="请输入姓名" />
          </Form.Item>
          <Form.Item name="sex" label="性别">
            <Radio.Group>
              <Radio value="0">男</Radio>
              <Radio value="1">女</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item
            name="phonenumber"
            label="联系电话"
            rules={[
              { required: true, message: "电话号码不能为空" },
              {
                pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
                message: "必须以1开头,11位数字",
              },
            ]}
          >
            <Input placeholder="请输入" />
          </Form.Item>
          <Form.Item
            name="email"
            label="邮箱"
            rules={[
              { required: true, message: "邮箱不能为空" },
              { type: "string", min: 6 },
              { type: "email", warningOnly: true },
            ]}
          >
            <Input placeholder="请输入" />
          </Form.Item>
          <Form.Item
            name="idCard"
            label="身份证号"
            rules={[
              { required: true, message: "身份证号不能为空" },
              {
                pattern:
                  /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/,
                message: "必须18位数字",
              },
            ]}
          >
            <Input placeholder="请输入" />
          </Form.Item>
        </Form>
      </div>
    </>
  );
}
